<template>
    <div>
        <quill-editor v-model="customtext.modifytext" :options="editorOption" ref="myQuillEditor" class="xj-ql"></quill-editor>
        <uploadimage ref="uploadimagecom" v-on:childByImageValue="childByImageValue"></uploadimage>
    </div>
</template>

<script>
import uploadimage from '@/components/common/uploadimage.vue';
// 自定义工具栏配置
const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], // toggled buttons
    ['blockquote', 'code-block'],

    [{ header: 1 }, { header: 2 }], // custom button values
    [{ list: 'ordered' }, { list: 'bullet' }],
    [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
    [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
    [{ direction: 'rtl' }], // text direction

    [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
    [{ header: [1, 2, 3, 4, 5, 6, false] }],

    [{ color: [] }, { background: [] }], // dropdown with defaults from theme
    [{ font: [] }],
    [{ align: [] }],
    ['link', 'image', 'video'], // 对于图片上传这是重点
    ['clean'], // remove formatting button
    // 新添加的工具
    ['sourceEditor']
];

export default {
    props: ['customtext'],
    components: {
        uploadimage
    },
    data() {
        return {
            // 富文本自定义配置项
            editorOption: {
                modules: {
                    toolbar: {
                        container: toolbarOptions, // 工具栏
                        handlers: {
                            shadeBox: null,
                            // 此处开始改写自带的图片上传
                            image: (value) => {
                                this.$refs.uploadimagecom.dialogVisible = true;
                                this.action = 'form_custom_desc_image';
                            },
                            sourceEditor: function(){
                                // alert('我新添加的工具方法');
                                const container = this.container;
                                const firstChild = container.nextElementSibling.firstChild;

                                // 在第一次点击源码编辑的时候，会在整个工具条上加一个div，层级比工具条高，再次点击工具条任意位置，就会退出源码编辑。可以在下面cssText里面加个背景颜色看看效果。

                                if (!this.shadeBox) {
                                    let shadeBox = (this.shadeBox = document.createElement('div'));

                                    shadeBox.style.cssText = 'position:absolute; top:0; left:0; width:100%; height:100%; cursor:pointer';
                                    container.style.position = 'relative';
                                    container.appendChild(shadeBox);
                                    firstChild.innerText = firstChild.innerHTML;

                                    shadeBox.addEventListener(
                                        'click',
                                        function () {
                                            this.style.display = 'none';
                                            firstChild.innerHTML = firstChild.innerText.trim();
                                        },
                                        false
                                    );
                                } else {
                                    this.shadeBox.style.display = 'block';
                                    firstChild.innerText = firstChild.innerHTML;
                                }
                            }
                        }
                    },
                    // 调整图片大小
                    imageResize: {
                        displayStyles: {
                            backgroundColor: 'black',
                            border: 'none',
                            color: 'white'
                        },
                        modules: ['Resize', 'DisplaySize', 'Toolbar']
                    }
                },
                // 在使用的页面中初始化按钮样式
                initButton: function () {
                    // 样式随便改
                    const sourceEditorButton = document.querySelector('.ql-sourceEditor');
                    sourceEditorButton.style.cssText = 'font-size:18px';

                    // 加了elementui的icon
                    sourceEditorButton.classList.add('el-icon-edit-outline');
                    // 鼠标放上去显示的提示文字
                    sourceEditorButton.title = '源码编辑';
                }
            }
        };
    },
    methods: {
        mouseover() {},
        mouseout() {},
        //确认按钮传值过来并赋值到form表单上
        childByImageValue: function (childValue) {
            if (this.action == 'form_custom_desc_image') {
                let quill = this.$refs.myQuillEditor.quill;
                // 获取光标所在位置
                let length = quill.getSelection().index;
                // 插入图片，res为服务器返回的图片链接地址
                quill.insertEmbed(length, 'image', childValue);
                quill.setSelection(length + 1);
            }
        }
    },
    mounted(){
        this.editorOption.initButton();
    }
};
</script>

<style lang="scss">
.xj-ql {
    width: 600px;
    height: 300px;
    background: white;
    .ql-container.ql-snow {
        background: white !important;
    }
}
</style>